<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=UTF-8">
<base href="<%=basePath%>">
<title>YP.ShO购</title>
<link rel="stylesheet" href="css/bootstrap.css"></link>
<link rel="stylesheet" href="css/style.css"></link>
<link rel="stylesheet" href="css/myButton.css"></link>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easydropdown.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	function checkedAll(object) {
		var flag = object.checked;
		var input = $("input[type='checkbox']");
		for (var i = 0; i < input.length; i++) {
			input[i].checked = flag;
		}
	}
	
	function testCheckedAll() {
		var flag = true;
		var input = $(".CId");
		for (var i = 0; i < input.length; i++) {
			if (input[i].checked == false) {
				flag = false;
				break;
			}
		}
		return flag;
	}
	
	/* 获得选择商品的全部CId */
	function getSelectId() {
		var input = document.getElementById("carts").getElementsByTagName(
				"input");
		var checkedCartIds = new Array();
		for (var i = 0; i < input.length; i++) {
			if (input[i].name == "CId" && input[i].checked == true) {
				checkedCartIds.push(input[i].value);
			}
		}
		return checkedCartIds;
	}
	
	/* 检查是否选择商品 */
	function testSelectId() {
		if (getSelectId().length < 1) {
			alert("请选择商品！");
			return false;
		} else {
			return true;
		}
	}

	function deleteGoodFromCart(id) {
		if (!confirm("您真的要删除此商品么？")) {
			return false;
		}
		$.ajax({
			url : "deleteCart.action",
			type : "post",
			data : {
				"CId" : id
			},
			success : function(data) {
				if (data) {
					alert("已成功删除");
					window.location.reload();
				} else {
					alert("删除失败");
				}
			}
		});
	}

	function buyGoodFromCart(object) {
		var CId = $(".CId");
		for(var i = 0;i<CId.length;i++){
			CId[i].checked = false;
		}
		$(object).parent().parent().find('input[class=CId]')[0].checked = true;
		$("#cartList").submit();
	}

	function deleteChecked() {
		if (testSelectId()) {
			if (!confirm("您真的要删除所选商品么？")) {
				return false;
			}
			var CIds = getSelectId();
			$.ajax({
				url : "deleteCart.action",
				type : "post",
				data : {"CId" : CIds},
				traditional : true,
				success : function(data) {
					if (data) {
						alert("已成功删除");
						window.location.reload();
					} else {
						alert("删除失败");
					}
				}
			});
		}
	}
	
	//去结算
	function buyChecked() {
		if (testSelectId()) {
			$("#cartList").submit();
		}
	}
	
	//商品搜索
	function search() {
		$.ajax({
			url : "userCart.action",
			type : "post",
			data : $("#searchKey").serialize(),
			dataType : "html",
			success : function() {
				window.location.reload();
			}
		});
	}

	function setQuantity(id,quantity) {
		$.ajax({
			url : "setQuantity.action",
			type : "post",
			data : {
				"CId" : id,
				"quantity" : quantity
			},
			success : function(data) {
				var flag = JSON.parse(data).flag;
				if(flag == "error"){
					alert("无法修改数量");
				}
			},
			error : function() {
				alert("与服务器同步失败");
			}
		}) 
	}
	
	/* 初始化搜索框 */
	$(document).ready(function() {
		$("#search").css({
			"display" : "inline",
			"float" : "right",
			"margin-right" : "0%"
		});
		$("#searchKey").attr({
			"placeholder" : "搜索购物车",
			"style" : "border-color: rgb(171,138,99)"
		});
		$("#searchSubmit").attr("style", "background-color: rgb(181,148,109)");
	});

	/* 导入数量按钮所需js */
	$(document).ready(function() {
		$(".add").click(function() {
			var t = $(this).parent().find('input[class=text_box]');
			t.val(parseInt(t.val()) + 1);
			var CId = $(this).parent().parent().find('input[class=CId]').val();
			setQuantity(CId,t.val());
			setTotal();
		})
		$(".min").click(function() {
			var t = $(this).parent().find('input[class=text_box]');
			t.val(parseInt(t.val()) - 1);
			if (parseInt(t.val()) < 1) {
				t.val(1);
			}
			var CId = $(this).parent().parent().find('input[class=CId]').val();
			setQuantity(CId,t.val());
			setTotal();
		})
		$(".CId").click(function() {
			var flag = testCheckedAll();
			document.getElementById("checkedAllGoodsTop").checked = flag;
			document.getElementById("checkedAllGoodsButton").checked = flag;
			setTotal();
		})
		$(".text_box").change(function() {
			if($(".text_box").val()<1) {
				$(".text_box").val(1);
			}
			var CId = $(this).parent().parent().find('input[class=CId]').val();
			setQuantity(CId,$(this).val());
			setTotal();
		})
		$("#checkedAllGoodsTop").click(function() {
			checkedAll(this);
			setTotal();
		})
		$("#checkedAllGoodsButton").click(function() {
			checkedAll(this);
			setTotal();
		})
		function setTotal() {
			var s = 0;
			$("#carts tr").each(function() {
				var t = $(this).find('input[class=text_box]').val();
				var p = $(this).find('span[class=price]').text();
				if ($.isNumeric(t) && $.isNumeric(p)) {
					var sub = parseInt(t) * parseFloat(p);
					$(this).find('span[id=Subtotal]').text(sub.toFixed(2));
					if ($(this).find('input[name=CId]').is(':checked') == true){
						s += sub;
					}
				}
			});
			$("#total").html(s.toFixed(2));
		}
		setTotal();
	})
	
	function goodsView(id) {
		window.open("<%=basePath%>goodDetail.action?gid="+id);
	}
</script>
<style type="text/css">
.form p {
	margin-bottom: 15px;
}

.form label {
	width: 8em;
}
</style>
</head>
<body>
	<%@include file="../common/head.jsp"%>
	<div class="menu"></div>
	<div class="men">
		<div class="container">
			<div class="col-md-3 sidebar">
				<div class="block block-layered-nav">
					<div class="block-title">
						<strong><span>我的YPShO购</span></strong>
					</div>
					<div class="block-content">
						<dl id="narrow-by-list">
							<dt class="last odd">用户中心</dt>
							<dd class="last odd">
								<ol>
									<li><a href="userInforView">个人信息管理</a></li>
								</ol>
							</dd>
							<dt class="last odd">我是买家</dt>
							<dd class="last odd">
								<ol>
									<li><a href="userOrders">我的订单管理</a></li>
									<li><a href="userCart" style="color:#e05b5b">我的购物车</a></li>
								</ol>
							</dd>
							<dt class="last odd">我是卖家</dt>
							<dd class="last odd">
								<ol>
									<li><a href="sellerOrders">我的订单管理</a></li>
									<li><a href="sellerGoods">我的商品管理</a></li>
								</ol>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<div class="col-md-9">
				<div class="mens-toolbar">
					<div class="sort">
						<div class="sort-by">
							<label>我的购物车</label>
						</div>
					</div>
				</div>
				<div class="form">
					<table id="carts">
						<tr height="37px" style="background: #f3f3f3;">
							<td style="width: 11px;"></td>
							<td style="width: 111px;">
							<input type="checkbox" id="checkedAllGoodsTop" checked="checked" value="全选">
							<span style="margin-left: 6px;">全选</span></td>
							<td style="width: 348px;">商品</td>
							<td align="center" style="width: 120px;">单价</td>
							<td align="center" style="width: 80px;">数量</td>
							<td align="center" style="width: 100px;">小计</td>
							<td align="center" style="width: 55px;">操作</td>
						</tr>
						<tr>
							<td colspan="7" style="height: 15px">
								<hr style="height:2px;background-color: rgb(170, 170, 170);">
							</td>
						</tr>
						<s:if test="Clist==null||Clist.size()<1">
							<tr align="center"><td colspan="7"><h2>您的购物车空空如也！<a href="/onlineshop" style="text-decoration:none;"><font color="#CD0000">买!买!!买!!!</font></a></h2></td>
							</tr>
						</s:if>
						<form action="cartSettle.action" id="cartList" name="cartList" method="post">
							<s:else>
								<s:iterator value="Clist" id="cart">
									<tr height="80px" style="border: rgb(197, 197, 197) solid 0.25px;">
										<td><input type="hidden" value="${cart.goods.id }" name="GId"></td> <!-- 商品id -->
										<td><input type="checkbox" value="${cart.id }" checked="checked" name="CId" class="CId"><!-- 购物车id -->
										<s:if test="#cart.goods.img==null||#cart.goods.img==''">
										<img alt="商品图片未能正确加载" src="./images/pic1.jpg" width="80px">
										</s:if><s:else>
										<img alt="商品图片未能正确加载" src="<s:property value="#cart.goods.img"/>" width="80px">
										</s:else></td>
										<td onclick="goodsView(${cart.goods.id })">${cart.goods.goodsname }</td>
										<td align="center"><span class="price">${cart.goods.price }</span></td>
										<td align="center">
											<input class="min" name="" type="button" value="-"  style="width: 15px;padding: 0px;float: left;height: 22px;background-color: rgb(229, 67, 70);"/>
											<input class="text_box" name="quantity" type="text" value="${cart.quantity }" style="width: 47px;height: 22px;padding: 0px;text-align:center;border: 1px solid;border-color: rgb(229, 67, 70);float: left;"/><!-- 商品数量 -->
											<input class="add" name="" type="button" value="+"  style="width: 15px;padding: 0px;float: left;height: 22px;background-color: rgb(229, 67, 70);"/>
										</td>
										<td align="center"><span id="Subtotal">${cart.quantity*cart.goods.price }</span></td>
										<td align="center">
											<a href="javascript:void(0);" class="button white small" onclick="deleteGoodFromCart(${cart.id })" style="margin-bottom: 2px;">删除</a><br>
											<a href="javascript:void(0);" class="button red small" onclick="buyGoodFromCart(this)" style="margin-top: 2px;">购买</a>
										</td> 
									</tr>
								</s:iterator>
							</s:else>
						</form>
						<tr>
							<td colspan="7" style="height: 15px">
								<hr style="height:2px;background-color: rgb(176, 1, 23)">
							</td>
						</tr>
						<s:if test="Clist!=null&&Clist.size()>0">
						<tr height="52px" style="border: rgb(197, 197, 197) solid 0.25px;">
							<td></td>
							<td style="width: 111px;" colspan="2">
								<input type="checkbox" id="checkedAllGoodsButton" checked="checked" value="全选">
								<span style="margin-left: 6px;">全选</span>
								<span style="margin-left: 8px;" onclick="deleteChecked()">删除选中的商品</span>
							</td>
							<td colspan="2"><span>总价：<label id="total" style="color: red;"></label></span></td>
							<td colspan="2" style="background-color: rgb(229, 67, 70); color: rgb(255,255,255);" onclick="buyChecked()"><p align="center" style="margin-top: 14.5px;"><b>去结算</b></p></td>
						</tr>
						</s:if>
					</table>
				</div>
			</div>
		</div>
	</div>

	<%@include file="../common/footer.jsp"%>

</body>
</html>